<template>
  <div class="bd-map">
    <div class="test">
      <!-- <input type="text" placeholder="测试搜索" v-model="keyword"> -->
      <!-- <i class="el-icon-search"></i> -->
      <!-- <i class="el-icon-location"></i> -->
    </div>
    

    <baidu-map v-if="true" :zoom="mapZoom" @zoomend="zoomend" class="bm-view" @ready="init" @click="getPoint" mapType="BMAP_NORMAL_MAP" :map-click="false">
      <!-- 行政区划 -->
      <bm-boundary name="海州区" :strokeWeight="2" :fillOpacity="0.1" strokeColor="blue" strokeStyle="dashed"></bm-boundary>
      <!-- 比例尺控件 -->
      <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT"></bm-scale>
      <!-- 缩放控件 -->
      <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
      <!-- 搜索控件 -->
      <!-- <bm-local-search :keyword="keyword" :auto-viewport="true" :location="'连云港'" :panel='false'></bm-local-search> -->
      <!-- 地图类型控件 -->
      <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type> -->
      <!-- 定位控件 -->
      <!-- <bm-geolocation 
        anchor="BMAP_ANCHOR_TOP_RIGHT" 
        :showAddressBar="true" 
        :autoLocation="true"
      ></bm-geolocation> -->
      <!-- 城市列表控件 -->
      <!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> -->
      <!-- 圆形 -->
      <!-- <bm-circle v-if="revRadius" :center="mapCenter" :radius="revRadius" stroke-color="blue" :fillOpacity="0.1" :stroke-weight="1" :editing="false"></bm-circle> -->
      <!-- 热力图 -->
      <!-- <bml-heatmap :data="hotData" :max="60" :radius="60"></bml-heatmap> -->
      
      <!-- 点 -->
      <bm-marker
        v-if="isIcon"
        :position="mapCenter"
        :dragging="false"
        animation="BMAP_ANIMATION_DROP"
        :icon="{
          url: require('@/assets/icon/mark/event.png'),
          size: { width: 32, height: 32 },
          opts: {
            imageSize: { width: 32, height: 32 },
          }
        }"
        @click="infoWindowOpen"
      >
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">
          <h1 class="bd-info" style="color:red">
            {{ showStr }}
          </h1>
        </bm-info-window>
      </bm-marker>
      <!-- 多点 -->
      <template v-if="revPoints">
        <bm-marker
        v-for="(item,i) in revPoints"
        :key="i"
        :position="{lng:item.lng,lat:item.lat}"
        :dragging="false"
        animation="BMAP_ANIMATION_DROP"
        :icon="{
          url: require('@/assets/icon/mark/'+icons[item.type-1]+'.png'),
          size: { width: 30, height: 30 },
          opts: {
            imageSize: { width: 30, height: 30 },
          }
        }"
        :title="item.info"
        @click="revPointMethod(item)"
      ></bm-marker>
      </template>

      <!-- 头盔 -->
      <bm-marker
        v-if="true"
        :position="helmetCenter"
        :dragging="false"
        animation="BMAP_ANIMATION_BOUNCE"
        :icon="{
          url: require('@/assets/icon/mark/helmet.png'),
          size: { width: 50, height: 50 },
          opts: {
            imageSize: { width: 50, height: 50 },
          }
        }"
        @click="helmetVideo"
      ></bm-marker>

      <!-- 海量点 -->
      <bm-point-collection v-if="lotPoint" :points="lotPoint" shape="BMAP_POINT_SHAPE_CIRCLE" color="blue" size="BMAP_POINT_SIZE_BIG" @click="revPointMethod"></bm-point-collection>

      <!-- map-view -->
      <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>

      <!-- 上下文菜单 -->
      <!-- <bm-context-menu>
        <bm-context-menu-item :callback="showR" text="自定义菜单"></bm-context-menu-item>
      </bm-context-menu> -->
    </baidu-map>
  </div>
</template>

<script>
import {BmlHeatmap} from 'vue-baidu-map'
// import DistanceTool from 'bmaplib.distancetool'
 
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { BmlHeatmap },
  props: {
    revCenter: null,          // 中心
    revRadius: null,          // 圆的半径
    revPoints: null,          // 点的数据
    revZoom: null,            // 缩放
    revPointMethod: null,     // 点的回调
    isIcon: null,             // 
    revDefaultPoints: null,   
    lotPoint: null
  },
  data() {
    return {
      map: null,
      BMap: null,
      temp: {},
      show: false,
      showStr: '',
      icons: ['person', 'sup', 'expert', 'markD3'],
      mapZoom: 11,
      mapCenter: {},
      keyword: '',
      hotData: [
        {lng: 119.223449, lat: 34.623639, count: 50},
        {lng: 119.236708, lat: 34.611638, count: 51},
        {lng: 119.191757, lat: 34.604983, count: 15}
      ],
      iconPoints: [],
      helmetCenter: {}
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    revZoom (n) {
      console.log("zoom变化")
      console.log(n)
      this.revZoom = n
    }
  },
  //方法集合
  methods: {
    init({ BMap, map }) {
      this.map = map;
      this.BMap = BMap;
      // 初始化地图,设置中心点坐标
      var point = new BMap.Point(this.mapCenter.lng, this.mapCenter.lat);
      map.centerAndZoom(point, this.revZoom || 11);
       
      map.setCurrentCity("连云港");
      // 添加鼠标滚动缩放
      map.enableScrollWheelZoom();
      // this.addPoints();
    },
    // 点击
    getPoint(e) {
      // 地图点击事件 =》获取经纬度
      // return console.log(e.point);
      return
      this.temp.lng = e.point.lng;
      this.temp.lat = e.point.lat;
      /* global BMap */
      const geocoder = new BMap.Geocoder(); // 创建地址解析器的实例
      geocoder.getLocation(e.point, (rs) => {
        // 当前位置定位
        // const province = rs.addressComponents.province // 省
        // const city = rs.addressComponents.city // 城市
        // const district = rs.addressComponents.district // 区县
        // const street = rs.addressComponents.street // 街道
        // const streetNumber = rs.addressComponents.streetNumber// 门牌号
        // this.temp.address = province + city + district + street + streetNumber // 组装成地址
        console.log(rs);
        this.temp.address = rs.address;
        // console.log(rs.surroundingPois) // 附近的POI点(array) POI：兴趣点 可以是一栋房子、一个商铺、一个邮筒、一个公交站
        // console.log(rs.business) // 商圈字段，代表此点所属的商圈(string)
      });
      //   console.log(this.temp);
    },

    handleCenter(targetCenter) {
      if (targetCenter.lng && targetCenter.lat) {
        let  point = new this.BMap.Point(targetCenter.lng, targetCenter.lat);
        this.map.centerAndZoom(point, this.mapZoom || 15);
        this.helmetCenter = targetCenter
      }else{
        console.log('没有center');
      }
      // let  point = new this.BMap.Point(this.mapCenter.lng, this.mapCenter.lat);
      // this.map.centerAndZoom(point, this.mapZoom || 15);
    },

    infoWindowClose () {
      this.show = false
    },

    infoWindowOpen () {
      console.log('show true');
      this.showStr = 'test'
      this.show = true
    },

    // 缩放结束事件
    zoomend(e) {
      if (!this.map) return
      console.log('缩放了')
      console.log(this.map.getZoom())
      this.mapZoom = this.map.getZoom()
    },

    // 点击头盔
    helmetVideo() {
      // this.$emit('helmetClick', this.helmetCenter.id)
    },

    // 右键
    showR(e) {
      console.log(e);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log('收到revDefaultPoints');
    if (this.revCenter == null) {
      this.mapCenter = {
        lat: 34.602267,
        lng: 119.228145,
      }
      return 
    }
    this.mapZoom = this.revZoom
    this.mapCenter.lat = parseFloat(this.revCenter.lat)
    this.mapCenter.lng = parseFloat(this.revCenter.lng)
    console.log(this.revDefaultPoints);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang='less' scoped>
/* @import url(); 引入css类 */
.bd-info {
  background-color: #00f;
  display: block;
  width: 100%;
  height: 100%;
}
.bd-map {
  width: 100%;
  height: 100%;
  position: relative;
  .test {
    width: 0.6rem;
    height: 0.6rem;
    position: absolute;
    left: 0.1rem;
    top: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    // border: 1px solid #00f;
    // padding: 0.1rem;
    // background-color: #fff;
    input {
      border-radius: 0.06rem;
      border: 1px solid #f00;
      display: block;
      width: 100%;
      height: 100%;
      padding-left: 0.1rem;
      font-size: 0.16rem;
    }
    i {
      color: #4d90fe;
      font-size: 0.5rem;
      transition: all 1s;
    }
  }
  .test:hover i {
    transform: translateY(-5px);
    color: #f00;
  }
  .bm-view {
    width: 100%;
    height: 100%;
  }
}
</style>